<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVGA播放器</title>
  <script src="/mobile/js/svga.min.js"></script>
  <script src="/mobile/js/vap.min.js"></script>
</head>

<body>
	svga礼物<input type="file" id="file" accept=".svga" label="svga">
  mp4礼物<input type="file" id="file2" accept=".mp4">
  <div>
    <div id="demoCanvas" style="width: 500px;height: 500px;display: inline-block; float: left;"></div>
    <div id="demoCanvas2" style="width: 500px;height: 500px;display: inline-block;"></div>
  </div>

  <script>
  var player = new SVGA.Player('#demoCanvas');
  var parser = new SVGA.Parser('#demoCanvas'); // 如果你需要支持 IE6+，那么必须把同样的选择器传给 Parser。
  var fileElem = document.getElementById('file')
  fileElem.addEventListener("change", function () {
    if (!this.files.length) return
    console.log(this.files)
    var file = this.files[0]
    const objectURL = window.URL.createObjectURL(file);
    console.log(file)
    console.log(objectURL)
    parser.load(objectURL, function (videoItem) {
      player.setVideoItem(videoItem);
      player.startAnimation();
    })
  }, false);
  var file2Elem = document.getElementById('file2')
  var vap = null
  file2Elem.addEventListener("change", function () {
    if (!this.files.length) return
    console.log(this.files)
    var file = this.files[0]
    const objectURL = window.URL.createObjectURL(file);
    console.log(file)
    console.log(objectURL)
    if (vap) {
      console.log(vap)
      vap.destroy()
    }
    vap = new Vap.default().play({
      container: document.querySelector('#demoCanvas2'),
      src: objectURL,
      config: {"info":{"v":2,"f":149,"w":750,"h":1624,"fps":24,"videoW":1136,"videoH":1632,"aFrame":[754,0,375,812],"rgbFrame":[0,0,750,1624],"isVapx":0,"codeTag":["_www.17ae.com_G2024081216085316453983"],"orien":0}},
      loop: true,
      width: 375,
      height: 766,
      mute: true,
      type: 0
    })
    vap.play()
  }, false);
  
  </script>
</body>

</html>